<template>
  <view>
    <view class="title">注册</view>
    <view class="title2">使用手机号~~~</view>
    <view class="username input">
      <input type="text" 
        placeholder="账号"
        v-model="obj.username"
        @blur="validateUsername"
      />
    </view>
    <view class="password input">
      <input type="password" 
        placeholder="密码"
        v-model="obj.password"
        @blur="validatePassword"
      />
    </view>
    <view class="email input">
      <input type="text" 
        placeholder="邮箱"
        v-model="obj.email"
        @blur="validateEmail"
      />
    </view>
    <view class="pnone input">
      <input type="text" 
        placeholder="手机号码"
        v-model="obj.phone"
        @blur="validatePhone"
      />
    </view>
    <view class="agree">
      <checkbox @click="agreed = !agreed">已阅读并同意</checkbox>
      <view class="clause agree2">用户条款</view>
      <view class="policy agree2">隐私政策</view>
    </view>
    <button @click="register">注册</button>
    <view class="helps">
      <view>帮助</view>|
      <view @click="goToLogin">登录</view>
    </view>
    <ErrorMessage
      v-if="message"
      :message="message"
      :visible="isErrorVisible"
      @update:visible="isErrorVisible = false"
    />
  </view>
</template>

<script>
import { api } from '../../utils/api/user.js';
import ErrorMessage from '../../components/errorMessage/errorMessage.vue';

export default {
  components: {
    ErrorMessage,
  },
  data() {
    return {
      agreed: false,
      message: '',
      isErrorVisible: false,
      obj: {
        username: '',
        password: '',
        email: '',
        phone: '',
      },
    };
  },
  methods: {
    goToLogin() {
      console.log(111);
      wx.navigateTo({
        url: '/pages/login/login',
      });
    },
    // 验证账号
    validateUsername() {
      const usernamePattern = /^[a-zA-Z0-9_-]{3,16}$/; // 验证账号
      if (!this.obj.username) {
        this.message = '账号不能为空';
        this.isErrorVisible = true;
        return false;
      } else if (!usernamePattern.test(this.obj.username)) {
        this.message = '请输入正确的账号（3-16位的大小写字符或下划线）';
        this.isErrorVisible = true;
        return false;
      }
      return true;
    },

    // 验证密码
    validatePassword() {
      if (!this.obj.password) {
        this.message = '密码不能为空';
        this.isErrorVisible = true;
        return false;
      } else if (this.obj.password.length < 6) {
        this.message = '密码至少6位';
        this.isErrorVisible = true;
        return false;
      }
      return true;
    },

    // 验证邮箱
    validateEmail() {
      const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 验证邮箱
      if (!this.obj.email) {
        this.message = '邮箱不能为空';
        this.isErrorVisible = true;
        return false;
      } else if (!emailPattern.test(this.obj.email)) {
        this.message = '请输入正确的邮箱';
        this.isErrorVisible = true;
        return false;
      }
      return true;
    },

    // 验证手机号
    validatePhone() {
      const phonePattern = /^1[2-9]\d{9}$/; // 验证手机号
      if (!this.obj.phone) {
        this.message = '手机号不能为空';
        this.isErrorVisible = true;
        return false;
      } else if (!phonePattern.test(this.obj.phone)) {
        this.message = '请输入有效的手机号码';
        this.isErrorVisible = true;
        return false;
      }
      return true;
    },

    // 注册
    async register() {
      // 按顺序验证
      if (!this.validateUsername()) return; // 如果账号验证失败，停止后续验证
      if (!this.validatePassword()) return; // 如果密码验证失败，停止后续验证
      if (!this.validateEmail()) return; // 如果邮箱验证失败，停止后续验证
      if (!this.validatePhone()) return; // 如果手机号验证失败，停止后续验证

      if (!this.agreed) {
        this.message = '请阅读并点击同意';
        this.isErrorVisible = true;
        return;
      }

      // 如果所有验证都通过，并且同意条款
      if (this.message === '' && !this.isErrorVisible) {
        console.log(this.obj); // 打印用户输入的数据
        try {
          const userInfo = await api.sign_in_api(this.obj); // 调用注册 API
          console.log(userInfo); // 打印返回的用户信息
          console.log('注册成功');
          
          // 保存用户信息到本地存储
          wx.setStorageSync('userInfo', {
            username: this.obj.username,
            password: this.obj.password,
            email: this.obj.email,
            phone: this.obj.phone,
          });

          // 注册成功后跳转到登录页面
          wx.navigateTo({
            url: '/pages/login/login', // 登录页面的路径
          });
          
        } catch (error) {
          console.error('注册失败:', error); // 打印详细的错误信息
          this.message = error.message || '注册失败，请稍后重试'; // 使用错误信息或默认提示
          this.isErrorVisible = true; // 显示错误提示
        }
      }
    },
  },
  
};
</script>

<style>
  page {
    background-color: #FFF;
  }
  .title {
    margin: 60rpx 0 20rpx 50rpx;
    font-size: 64rpx;
    font-weight: 400;
    letter-spacing: 0rpx;
    line-height: 76rpx;
    color: rgba(51, 62, 99, 1);
    text-align: left;
    vertical-align: top;
  }
  .title2 {
    margin: 0rpx 0 80rpx 50rpx;
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 0.64rpx;
    line-height: 54rpx;
    color: rgba(147, 147, 147, 1);
    text-align: left;
    vertical-align: top;
  }
  .input {
    display: flex;
    margin: 0rpx 0 44rpx 40rpx;
    padding: 40rpx 0 12rpx 62rpx;
    width: 80%;
    height: 60rpx;
    background: rgba(247, 248, 249, 1);
    border-radius: 20rpx;
  }
  .input input {
    width: 80%;
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 0.4rpx;
    line-height: 56rpx;
    color: rgba(189, 189, 189, 1);
    text-align: left;
    vertical-align: middle;
  }
  .agree {
    display: flex;
    margin: 20rpx 0 56rpx 66rpx;
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0rpx;
    line-height: 47.36rpx;
    color: rgba(147, 147, 147, 1);
    text-align: left;
    vertical-align: top;
  }
  .agree2 {
    margin-right: 4rpx;
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 1rpx;
    line-height: 44rpx;
    text-decoration-line: underline;
    color: rgba(36, 204, 184, 1);
    text-align: center;
    vertical-align: top;
  }
  
  button {
    margin-bottom: 26rpx;
    width: 619.56rpx;
    height: 108.76rpx;
    background: rgba(36, 204, 184, 1);
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 0.4rpx;
    line-height: 108.76rpx;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    vertical-align: middle;
  }
  .helps {
    display: flex;
    justify-content: space-between;
    margin: 0 290rpx;
    width: 20%;
    height: 44rpx;
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 1rpx;
    line-height: 44rpx;
    color: rgba(98, 98, 98, 1);
    text-align: center;
    vertical-align: top;
  }
</style>
